﻿<UserControl x:Class="WPF_Media_Player.ProgressSlider"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    Width="400" Height="10">
    <UserControl.Resources>
        <Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}">
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="{x:Type RepeatButton}">
                                <Grid x:Name="Root" Background="Transparent" Opacity="0" />
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>
        <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
        	<Setter Property="Width" Value="24"/>
        	<Setter Property="Template">
        		<Setter.Value>
                    <!--圆型按钮的样式-->
        			<ControlTemplate TargetType="{x:Type Thumb}">
        				<Grid x:Name="Root">
        					<VisualStateManager.VisualStateGroups>
        						<VisualStateGroup>
        							<VisualStateGroup.Transitions>
        								<VisualTransition To="Normal" GeneratedDuration="0:0:0.1" />
        							</VisualStateGroup.Transitions>
        							<VisualState x:Name="Normal" />
        							<VisualState x:Name="MouseOver">
        								<Storyboard>
        									<ColorAnimation Duration="0"
        										Storyboard.TargetName="outerCircleFill"
        										Storyboard.TargetProperty="Color"
        										To="Gray" />
        								</Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        					</VisualStateManager.VisualStateGroups>
        					<Rectangle x:Name="OuterCircle" Stretch="Fill" RadiusX="2" RadiusY="2">
        						<Rectangle.Fill>
        							<SolidColorBrush x:Name="outerCircleFill" Color="#666666" />
        						</Rectangle.Fill>
        					</Rectangle>
        				</Grid>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>

        <!--水平slider的样式-->
        <ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
            <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>

                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0.5" />
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
						
                <Track Grid.Row="1" x:Name="PART_Track">
                    <!-- 按钮左侧的滚动条的样式-->
                    <Track.DecreaseRepeatButton>
                        <RepeatButton 
         Style="{StaticResource SliderButtonStyle}"
          Command="Slider.DecreaseLarge" />
                    </Track.DecreaseRepeatButton>
                    <!-- 按钮的样式-->
                    <Track.Thumb>
                        <Thumb Style="{StaticResource SliderThumbStyle}" />
                    </Track.Thumb>
                    <!-- 按钮右侧的滚动条的样式-->
                    <Track.IncreaseRepeatButton>
                        <RepeatButton 
          Style="{StaticResource SliderButtonStyle}"
          Command="Slider.IncreaseLarge" />
                    </Track.IncreaseRepeatButton>                       
                </Track>
                            <Rectangle Stroke="Black" StrokeThickness="1" Grid.Column="0" Grid.ColumnSpan="3"  Margin="4,2,4,2" />
            </Grid>
        </ControlTemplate>
        
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Rectangle x:Name="downloadBackground" Fill="White" Margin="4,2,4,2"  />
        <Rectangle x:Name="downloadProgress" Width="100" Fill="#FFCCCCCC" Margin="4,2,4,2" HorizontalAlignment="Left"/>
        <Slider x:Name="slider" MinHeight="10" Template="{StaticResource HorizontalSlider}" IsTabStop="False" />
    </Grid>
</UserControl>
